class Banner {
    constructor(newBox, newlis) {
            this.box = newBox;
            this.oLis = newlis;
            // index是轮播图的索引，决定图片和小红点的位置
            this.index = 0;
            this.box.style.backgroundImage = "url(img/imgs/" + this.index + ".jpg)";
            this.oLis[this.index].style.backgroundColor = "white";
            // this.eventBind();

        }
        // 设置背景图
    setBgcImage() {
            this.box.style.backgroundImage = "url(img/imgs/" + this.index + ".jpg)";

        }
        // 设置LI的红点
    setLiColor() {
        for (let i = 0; i < this.oLis.length; i++) {
            if (i == this.index) {
                this.oLis[i].style.backgroundColor = "red";
            } else {
                this.oLis[i].style.backgroundColor = "white";
            }
        }
    }
    prev() {
        this.index--;
        if (this.index == -1) {
            this.index = this.oLis.length - 1;
        }
        this.setBgcImage();
        this.setLiColor();
    }
    next() {
        this.index++;
        if (this.index == this.oLis.length) {
            this.index = 0;
        }
        this.setLiColor();
        this.setBgcImage();
    }
    eventBind() {
        let oPrev = document.querySelector("#jiantou");
        let oNext = document.querySelector("#jiantou1");
        let that = this;
        let time = setInterval(function() {
            that.next();
        }, 2000);
        oPrev.onclick = function() {
            that.prev();
        }
        oNext.onclick = function() {
            that.next();
        }
        for (let i = 0; i < this.oLis.length; i++) {
            this.oLis[i].onclick = function() {
                that.index = i;
                that.setBgcImage();
                that.setLiColor();
            }
        }
    }
}

let oBox = document.querySelector("#oImg");
let oLis = document.getElementsByClassName("lis");

let b = new Banner(oBox, oLis);
b.eventBind();

// 二级菜单

// 第一个li

$(".eryi").hover(function() {
    $(".Submenu").stop().slideDown();
}, function() {
    $(".Submenu").stop().slideUp();
})
$(".erer").hover(function() {
    $(".Submenu2").stop().slideDown();
}, function() {
    $(".Submenu2").stop().slideUp();
})
$(".ersan").hover(function() {
    $(".Submenu3").stop().slideDown();
}, function() {
    $(".Submenu3").stop().slideUp();
});
$(".zhucebian").hover(function() {
    $(".erji-sousuo").stop().slideDown();
}, function() {
    $(".erji-sousuo").stop().slideUp();
});
$(".zhucebian2").hover(function() {
    $(".sub-denglu-zhuce").stop().slideDown();
}, function() {
    $(".sub-denglu-zhuce").stop().slideUp();
});

// 吸顶
// 顶部滑动
window.onscroll = function() {
        let headerup = document.querySelector(".header-up");
        let headerdown = document.querySelector(".header-down");
        let len = headerdown.offsetTop;
        let scroll = document.documentElement.scrollTop;

        if (len < scroll) {
            headerdown.style.position = "fixed";
            headerdown.style.top = 0;
            headerdown.style.zIndex = 999;
            $("#ul").css({
                marginLeft: 200,
                marginTop: "-21px"

            });

            $(".Submenu").css({
                marginTop: -10
            });
            $(".Submenu2").css({
                marginTop: -10
            });
            $(".Submenu3").css({
                marginTop: -12
            });
            $(".header-down-right").css({
                marginTop: -21,
                paddingLeft: -50

            });
            $("#logo").css({
                display: "block"
            });
            $(".logo1").css({
                display: "none"
            });
            $(".header-down").css({
                width: "100 % ",
                height: 75,
                backgroundImage: "linear-gradient(to bottom, rgb(0, 0, 0, 1), rgb(0, 0, 0, 1))",
            });

        } else {
            headerdown.style.position = "absolute";
            headerdown.style.top = 60;
            headerdown.style.zIndex = 10;
            $("#ul").css({
                marginLeft: 0,
                marginTop: "0"

            });
            $(".Submenu").css({
                marginTop: -10
            });
            $(".Submenu2").css({
                marginTop: -10
            });
            $(".Submenu3").css({
                marginTop: -10
            });
            $(".header-down-right").css({
                marginTop: 0,
                paddingLeft: 0

            });
            $("#logo").css({
                display: "none"
            });
            $(".logo1").css({
                display: "block"
            });
            $(".header-down").css({
                width: "100 % ",
                height: 82,
                backgroundImage: "linear-gradient(to bottom, rgb(51, 42, 44, 0), rgb(232, 232, 232, 0))",
                // background: none,
                top: 70
            });

        }
    }
    // 登录注册变换
    // 登录按钮
$(".deng-lu span a").mouseover(function() {
    $(".denglu-kuang_hezi").css({
        display: "block"

    });
    $(".deng-lu span a").css({
        color: "black"
    });
    $(".zhuce span a").css({
        color: "#999999"
    });
    $(".denglu-kuang_hezi1").css({
        display: "none"
    });
});

// 登录离开
// $(".deng-lu span a").mouseout(function() {
//     $(".denglu-kuang_hezi").css({
//         display: "none"

//     });
//     $(".deng-lu span a").css({
//         color: "#999999"
//     });
//     $(".denglu-kuang_hezi1").css({
//         display: "block"
//     });
// });
// 注册按钮
$(".zhuce span a").mouseover(function() {
    $(".denglu-kuang_hezi1").css({
        display: "block"

    });
    $(".zhuce span a").css({
        color: "black"
    });
    $(".deng-lu span a").css({
        color: "#999999"
    });
    $(".denglu-kuang_hezi").css({
        display: "none"
    });
});
// $(".zhuce span a").mouseout(function() {
//     $(".denglu-kuang_hezi1").css({
//         display: "none"

//     });
//     $(".zhuce span a").css({
//         color: "#999999"
//     });
//     $(".denglu-kuang_hezi").css({
//         display: "block"
//     });
// });



// <!-- 登录注册二级菜单 -->